<template>
    <div id="detail">
      <Banner :imgList="imgList"></Banner>
      <header2></header2><!--这里不能直接用header,会产生歧义 -->
      <div class="content">
        <list :list="list"></list>
      </div>
    </div>
</template>

<script>
import Banner from './components/Banner'
import Header2 from './components/Header' // JS部分区分大小写,HTML部分不区分大小写
import List from './components/List'
export default {
  name: 'Detail',
  components: {
    Banner,
    Header2,
    List
  },
  data () {
    return {
      imgList: [], // 1.注意这里不能imgList: Array, 它是函数返回的值,而不是表示对象的属性
      list: [
        {
          title: '成人票',
          children: [
            {
              title: '成人三馆联票',
              children: [
                {
                  title: '成人三馆联票 - 某一连锁店销售'
                }
              ]
            },
            {
              title: '成人五馆联票'
            }
          ]
        },
        {
          title: '儿童票'
        },
        {
          title: '学生票'
        },
        {
          title: '特惠票'
        }
      ]
    }
  },
  /*
  由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
  当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。

  然而在大多数情况下，你应该避免在此期间更改状态。
  如果要相应状态改变，通常最好使用 计算属性computed 或 watcher 取而代之。

  注意 updated 不会保证所有的子组件也都一起被重绘。
  如果你希望等到整个视图都重绘完毕，可以在 updated 里使用 vm.$nextTick：
  */
  mounted () {
    // console.log(this.$route.params.id)
    // 1.let的作用域在整个mounted()函数中?
    let id = this.$route.params.id
    this.$http.get('/api/detail.json?id=' + id)
      .then((res) => {
        const ret = res.data
        if (ret.ret && ret.data) {
          // 1.data{ '01':[], '02':[], '03':[] }
          const data = ret.data
          // 2.for...in遍历对象,获取数组
          // 3.break 只跳出在它前面，离它最近的for ，while ，do
          // 4.return 语句的作用是从当前函数退出，并从那个函数返回一个值
          for (let key in data) {
            if (key === id) {
              // console.log(id)
              // console.log(data[key])
              this.imgList = data[key]
              // console.log(this.imgList)
              return
            }
          }
        }
      }).catch((err) => {
        alert(err.message)
      })
  },
  activated () {
  }
}
</script>

<style lang="stylus" scoped>
  .content
    height 50rem
</style>
